import React, { memo, useEffect } from 'react'
import { shallowEqual, useSelector, useDispatch } from 'react-redux'

import { getSizeImage } from '@/utils/format-utils'

import { SettleSingerWrapper } from './style'
import { getSettleSingerAction } from '../../store/actionCreators'
const MSNSettleSinger = memo(() => {

  // redux hooks
  const { settleSingers= [] } = useSelector(state=>({
    settleSingers: state.getIn(['recommend','settleSingers'])
  }),shallowEqual)

  const dispatch = useDispatch()
  // other hooks
  useEffect(()=>{
    dispatch(getSettleSingerAction())
  },[dispatch])
  return (
    <SettleSingerWrapper>
      <div className='top'>
        <span>入驻歌手</span>
        <a href="/todo">查看全部 &gt;</a>
      </div>
      <div className='content'>
      {
        settleSingers.slice(0,5).map( item => {
          return (
            <div key={item.id} className='item'>
              <a href="/todo">
                <div className='head'>
                  <img src={getSizeImage(item.picUrl,62)} alt="" />
                </div>
                <div className='info'>
                  <h4>
                    <span className='name text-nowrap'>{item.name}</span>
                    <p className='from text-nowrap'>华语歌手{item.name}</p>
                  </h4>
                </div>
              </a>
            </div>
          )
        })
      }
      </div>
      <div className='footer'>
        <a href="/todo" className='btn sprite_button'>
          <i>申请为网易云音乐人</i>
        </a>
      </div>
    </SettleSingerWrapper>
  )
})

export default MSNSettleSinger